<template>
  <div>
    <div class="search1">
      <div class="search-left1">
        <div class="search_item1">
          <el-input @keyup.enter.native="getSchedualList" v-model="keyword" placeholder="请输入班次名称"></el-input>
        </div>
        <div class="search_item">
          <el-button class="anniubtn" @click="getSchedualList" type="primary" size="small" icon="el-icon-search">搜索
          </el-button>
        </div>
        <div class="search_item margin29">
          <el-button class="anniubtn" @click="reset" size="small" icon="el-icon-refresh-left">重置</el-button>
        </div>
      </div>
      <div class="search-right1">
        <div class="attendance_add">
          <el-button @click="addShiftManager('add')" class="el_button_add" type="primary" size="small">新增班次</el-button>
        </div>
      </div>
    </div>

    <div class="table_info">
      <div class="new_add flex">
        <div class="attendance_details">班次详情</div>
      </div>
      <div class="table">
        <div class="table_head flex">
          <div class="table_head_items">序号</div>
          <div class="table_head_items">班次名称</div>
          <div class="table_head_items">创建时间</div>
          <div class="table_head_items">操作</div>
        </div>
        <div class="table_body flex" v-for="(item, index) in schedualData" :key="index"
          :class="index % 2 > 0 ? 'background_f5' : ''">
          <div class="table_body_items">{{ index + 1 }}</div>
          <div class="table_body_items">{{ item.name }}</div>
          <div class="table_body_items">{{ item.createDate }}</div>
          <div class="table_body_items">
            <el-link class="el_link" type="primary" @click="see(item)">查看</el-link>
            <el-link type="primary" @click="addShiftManager('edit', item)" class="marginleft24 el_link">编辑</el-link>
          </div>
        </div>
      </div>
    </div>
    <!-- 分页 -->
    <div class="el_pagination">
      <el-pagination class="el_pagation1" background @current-change="handleCurrentChange" layout="prev, pager, next"
        :page-size="pageSize" :total="schedualLength">
      </el-pagination>
    </div>
    <!-- 新增、编辑班次 -->
    <el-dialog class="shift-dialog" :title="isEdit ? '编辑班次' : '新增班次'" 
      v-dialogDrag :visible.sync="shiftManagerDialog"
      width="700px" :before-close="handleClose">
      <el-form :model="shiftForm" class="shift-form" :rules="shiftRules" ref="shiftForm">
        <!-- 班次名称 -->
        <div style="margin-bottom: 12px">
          <el-form-item label-width="70px" label="班次名称" prop="name">
            <el-input v-model="shiftForm.name"></el-input>
          </el-form-item>
        </div>
        <!-- 单日考勤截止时间 -->
        <el-row>
          <el-col :span="8">
            <el-form-item label-width="120px" label="单日考勤截止时间" prop="across_day">
              <el-select v-model="shiftForm.across_day" placeholder="请选择">
                <el-option v-for="item in acrossDay" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="4" style="margin-left: 10px">
            <el-form-item prop="abort">
              <el-time-select v-model="shiftForm.abort" :picker-options="{
                start: '00:05',
                step: '00:5',
                end: '23:55'
              }" placeholder="选择时间">
              </el-time-select>
            </el-form-item>
          </el-col>

          <el-col :span="1" class="tip-icon">
            <el-tooltip class="item" effect="dark" placement="top-start">
              <i class="el-icon-info"></i>
              <div slot="content">
                <p>1、单日考勤截止时间：最晚的打卡下班时间</p>
                <p>2、单日考勤截止时间为当日时</p>
                <p style="text-indent: 2em;">①班次不可以选择次日</p>
                <p style="text-indent: 2em;">②最晚的班次时间不能超过单日考勤截止时间</p>
                <p>3、单日考勤截止时间为次日时</p>
                <p style="text-indent: 2em;">①最晚的班次时间不能超过单日考勤截止时间</p>
                <p style="text-indent: 2em;">②最早的班次时间不能早于单日考勤截止时间</p>
              </div>
            </el-tooltip>
          </el-col>
        </el-row>
        <el-row v-for="(ele, index) in shiftForm.time_json" :key="index">
          <el-col :span="6">
            <el-form-item :label="index + 1 | filtersName" label-width="60px"
              :prop="'time_json.' + index + '.beginDate'" :rules="{
                required: true, message: '开始日期不能为空', trigger: 'change'
              }">
              <el-select v-model="ele.beginDate" placeholder="请选择">
                <el-option v-for="item in commonDay" :key="item.value" :label="item.label" :disabled="item.disabled"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="4" style="margin-left: 10px">
            <el-form-item :prop="'time_json.' + index + '.begin'" :rules="{
              required: true, message: '开始时间不能为空', trigger: 'change'
            }">
              <el-time-select v-model="ele.begin" :picker-options="{
                start: '00:05',
                step: '00:5',
                end: '23:55'
              }" placeholder="选择时间">
              </el-time-select>
            </el-form-item>
          </el-col>
          <el-col :span="1" class="zhi">至</el-col>
          <el-col :span="4">
            <el-form-item :prop="'time_json.' + index + '.endDate'" :rules="{
              required: true, message: '结束日期不能为空', trigger: 'change'
            }">
              <el-select v-model="ele.endDate" placeholder="请选择">
                <el-option v-for="item in commonDay" :key="item.value" :label="item.label" :disabled="item.disabled"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="4" style="margin-left: 10px">
            <el-form-item :prop="'time_json.' + index + '.end'" :rules="{
              required: true, message: '结束时间不能为空', trigger: 'change'
            }">
              <el-time-select v-model="ele.end" :picker-options="{
                start: '00:05',
                step: '00:5',
                end: '23:55'
              }" placeholder="选择时间">
              </el-time-select>
            </el-form-item>
          </el-col>
          <el-col :span="1" v-show="index != 0" class="del-icon">
            <el-button @click="delShiftItem" type="danger" size="mini" icon="el-icon-delete" circle></el-button>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-button type="primary" @click="addShiftData">新增班次</el-button>
          </el-col>
        </el-row>
      </el-form>
      <el-form :model="elasticForm" v-if="elasticVisible" class="elastic-container" :rules="elasticRules"
        ref="elasticForm">
        <div class="elastic-tan">
          <div class="elastic-left">弹性打卡</div>
          <div class="elastic-right">
            <el-checkbox v-model="elasticForm.typeOne" :disabled="elasticForm.typeTwo">允许晚到晚走、早到早走</el-checkbox>
            <el-form-item prop="max_late" class="inline-item">
              上班最晚可到：
              <el-input v-model.number="elasticForm.max_late" :disabled="!elasticForm.typeOne"></el-input>
              上班晚到几分钟，下班须晚走几分钟
            </el-form-item>
            <el-form-item prop="max_early" class="inline-item">
              上班最早可到：
              <el-input v-model.number="elasticForm.max_early" :disabled="!elasticForm.typeOne"></el-input>
              上班早到几分钟，下班可早走几分钟
            </el-form-item>
            <el-checkbox v-model="elasticForm.typeTwo" :disabled="elasticForm.typeOne">晚到、早走几分钟不记为异常</el-checkbox>
            <div>计算规则：仅第一次上班，最后一次下班生效</div>
            <el-form-item prop="next_max_late" class="inline-item">
              上班最晚可到：
              <el-input v-model.number="elasticForm.next_max_late" :disabled="!elasticForm.typeTwo"></el-input>
              晚到 15 分钟内不算迟到
            </el-form-item>
            <el-form-item prop="max_early_out" class="inline-item">
              下班最晚可到：
              <el-input v-model.number="elasticForm.max_early_out" :disabled="!elasticForm.typeTwo"></el-input>
              早走 15 分钟内不算迟到
            </el-form-item>
          </div>
        </div>
      </el-form>
      <div class="more">
        <div class="title">更多设置</div>
        <div class="more-content">
          <div class="late-box">
            <el-checkbox v-model="elasticForm.serious_flag"></el-checkbox>
            <span class="desc">严重迟到分钟数</span>
            <el-input v-model.number="elasticForm.serious_late"></el-input>
          </div>
          <div class="late-box">
            <el-checkbox v-model="elasticForm.abs_flag"></el-checkbox>
            <span class="desc">旷工迟到分钟数</span>
            <el-input v-model.number="elasticForm.absenteeism_late"></el-input>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <div class="marginttop24"></div>
        <el-button @click="shiftManagerDialog = false">取 消</el-button>
        <el-button type="primary" @click="saveShift('shiftForm')">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 班次详情 -->
    <el-dialog v-dialogDrag title="班次详情" :visible.sync="shiftDetailDialog" width="650px" :before-close="handleClose">
      <div class="details">
        <div class="detail_title">{{ shiftDetail.name }}</div>
        <div ref="tableWidth" class="details_table flexx">
          <div class="details_table_items" v-for="(item, index) in shiftDetail.time_json" :key="index">
            <div class="details_table_items_top">{{ index + 1 | filtersName }}</div>
            <div class="details_table_items_bottom">{{ item.begin }}-{{ item.end }}</div>
          </div>
        </div>
        <div class="tan" v-show="shiftDetail.type == 1 || shiftDetail.type == 2">
          <div class="tan-title">弹性打卡</div>
          <div class="tan-content">
            <div v-if="shiftDetail.type == 1">
              <div>允许晚到晚走、早到早走</div>
              <div>上班最晚可到：<el-tag>{{ shiftDetail.one.max_late }}分钟</el-tag> 上班晚到几分钟，下班须晚走几分钟</div>
              <div>上班最早可到：<el-tag>{{ shiftDetail.one.max_early }}分钟</el-tag> 上班早到几分钟，下班可早走几分钟</div>
            </div>
            <div v-if="shiftDetail.type == 2">
              <div>晚到、早走几分钟不记为异常</div>
              <div>计算规则：仅第一次上班，最后一次下班生效</div>
              <div>上班最晚可到：<el-tag>{{ shiftDetail.two.next_max_late }}分钟</el-tag> 晚到 15 分钟内不算迟到</div>
              <div>下班最晚可到：<el-tag>{{ shiftDetail.two.max_early_out }}分钟</el-tag> 早走 15 分钟内不算迟到</div>
            </div>
          </div>
        </div>
        <div class="tan" v-show="shiftDetail.serious_late || shiftDetail.absenteeism_late">
          <div class="tan-title">更多设置</div>
          <div class="tan-content">
            <div v-if="shiftDetail.serious_late">严重迟到分钟数：<el-tag>{{ shiftDetail.serious_late }}分钟</el-tag>
            </div>
            <div v-if="shiftDetail.absenteeism_late">旷工迟到分钟数：<el-tag>{{ shiftDetail.absenteeism_late }}分钟</el-tag>
            </div>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { addSchedual, getSchedualList, updateSchedual, getElastic, putElastic } from '@/api/user.js';
export default {
  data() {
    return {
      shiftManagerDialog: false,
      shiftDetailDialog: false,
      shiftDetail: {
        type: '',
        name: '',
        createDate: '',
        time_json: [],
        one: {
          max_late: '',
          max_early: ''
        },
        two: {
          next_max_late: '',
          max_early_out: ''
        },
        serious_late: '', // 严重迟到分钟数
        absenteeism_late: '' // 旷工迟到分钟数
      },
      schedualData: [],
      keyword: '',
      currentpage: 1,
      pageSize: 15,

      /**
       * 新增班次 start
       */
      shiftForm: {
        name: '', // 班次名称
        across_day: '', // 单日考勤截止时间 选择当日还是次日
        abort: '', // 单日考勤截止时间 时分
        time_json: [{
          beginDate: '', // 开始日期
          begin: '', // 结束时间
          endDate: '', // 结束日期
          end: '' // 结束时间
        }]
      },
      id: '',
      acrossDay: [{
        value: '0',
        label: '当日'
      }, {
        value: '1',
        label: '次日'
      }],
      commonDay: [{
        value: '0',
        label: '当日',
        disabled: false
      }, {
        value: '1',
        label: '次日',
        disabled: false
      }],
      shiftRules: {
        name: [{ required: true, message: '请输入班次名称', trigger: 'blur' }
        ],
        across_day: [{
          required: true, message: '请选择截止日期', trigger: 'change'
        }],
        abort: [{
          required: true, message: '请选择截止时间', trigger: 'change'
        }],
      },

      // 弹性打卡
      elasticVisible: false,
      elasticForm: {
        typeOne: false,
        typeTwo: false,
        type: 0,
        max_late: '',
        max_early: '',
        next_max_late: '',
        max_early_out: '',
        serious_flag: false, // 为 false = -1，不传 serious_late
        serious_late: '',
        abs_flag: false, // 为 false = -1，不传 abs_flag
        absenteeism_late: ''
      },
      elasticData: {},
      /**
       * end
       */

      schedualLength: 0,
      isEdit: false,
    };
  },
  filters: {
    filtersName(val) {
      if (val == 1) {
        return '班次一'
      } else if (val == 2) {
        return '班次二'
      } else if (val == 3) {
        return '班次三'
      } else if (val == 4) {
        return '班次四'
      } else if (val == 5) {
        return '班次五'
      } else if (val == 6) {
        return '班次六'
      } else if (val == 7) {
        return '班次七'
      } else if (val == 8) {
        return '班次八'
      } else if (val == 9) {
        return '班次九'
      } else if (val == 10) {
        return '班次十'
      } else if (val == 11) {
        return '班次十一'
      } else if (val == 12) {
        return '班次十二'
      }
    },
  },
  computed: {
    // 单日考勤
    calcTimeJson() {
      const { across_day, time_json } = this.shiftForm
      return { across_day, time_json }
    },
    // 弹性规则值计算
    calcType() {
      const { type, typeOne, typeTwo } = this.shiftForm
      return { type, typeOne, typeTwo }
    }
  },
  watch: {
    calcTimeJson: {
      handler(obj) {
        if (obj.across_day == '0') {
          this.commonDay[1].disabled = true
        } else {
          this.commonDay[1].disabled = false
        }
      },
      deep: true
    },
    // 判断是否显示弹性规则
    'shiftForm.time_json': {
      handler(arr) {
        if (arr.length > 0) {
          this.elasticVisible = arr.every(ele => {
            return ele.beginDate == '0' && ele.endDate == '0'
          })
        }
      },
      deep: true
    },
    // 弹性规则
    calcType: {
      handler(obj) {
        if (obj.typeOne) {
          this.elasticForm.type = 1
          this.elasticForm.next_max_late = ''
          this.elasticForm.max_early_out = ''
        } else if (obj.typeTwo) {
          this.elasticForm.type = 2
          this.elasticForm.max_late = ''
          this.elasticForm.max_early = ''
        }
      },
      deep: true
    },
    // 严重迟到分钟数
    'elasticForm.serious_flag'(val) {
      if (!val) {
        this.elasticForm.serious_late = ''
      }
    },
    // 旷工迟到分钟数
    'elasticForm.abs_flag'(val) {
      if (!val) {
        this.elasticForm.absenteeism_late = ''
      }
    }
  },
  async mounted() {
    await this.getSchedualList()
  },
  methods: {
    // 获取列表
    getSchedualList() {
      let params = {
        name: this.keyword,
        order: 'desc',
        orderfield: 'F_CreateDate',
        limit: this.currentpage,
        size: this.pageSize
      }
      getSchedualList(params).then(res => {
        if (res.data.success) {
          this.schedualData = res.data.data.Rows
          this.schedualLength = res.data.data.Total
        }
      })
    },
    reset() {
      this.keyword = ''
      this.getSchedualList()
    },
    // 分页
    handleCurrentChange(val) {
      this.currentpage = val
      this.getSchedualList()
    },
    // 新增 or 编辑 班次弹窗
    addShiftManager(val, item) {
      this.shiftManagerDialog = true
      if (val === 'edit') {//编辑
        this.isEdit = true
        this.shiftForm.name = item.name
        this.shiftForm.across_day = item.acrossDay.toString()
        this.shiftForm.abort = item.abort
        this.shiftForm.time_json = JSON.parse(item.timeJson)
        this.id = item.id
        // 弹性
        this.elasticForm.serious_flag = (item.seriousLate && item.seriousLate != -1) ? true : false
        this.elasticForm.serious_late = (item.seriousLate && item.seriousLate != -1) ? item.seriousLate : ''
        this.elasticForm.abs_flag = (item.absenteeismLate && item.absenteeismLate != -1) ? true : false
        this.elasticForm.absenteeism_late = (item.absenteeismLate && item.absenteeismLate != -1) ? item.absenteeismLate : ''
        getElastic(item.id).then(res => {
          if (res.data.success) {
            this.elasticData = res.data.data
            this.elasticForm.type = this.elasticData.type
            if (this.elasticForm.type == 1) {
              this.elasticForm.typeOne = true
            } else if (this.elasticForm.type == 2) {
              this.elasticForm.typeTwo = true
            }

            if (this.elasticData.one) {
              this.elasticForm.max_late = this.elasticData.one.max_late
              this.elasticForm.max_early = this.elasticData.one.max_early
            } else if (this.elasticData.two) {
              this.elasticForm.next_max_late = this.elasticData.two.next_max_late
              this.elasticForm.max_early_out = this.elasticData.two.max_early_out
            } else {
              this.elasticForm.typeOne = false
              this.elasticForm.typeTwo = false
              this.elasticForm.max_late = ''
              this.elasticForm.max_early = ''
              this.elasticForm.next_max_late = ''
              this.elasticForm.max_early_out = ''
            }
          }
        })
      } else if (val === 'add') {//新增
        this.isEdit = false
        this.id = ''
        this.$nextTick(() => {
          this.$refs.shiftForm.resetFields()
          this.shiftForm.name = ''
          this.shiftForm.across_day = ''
          this.shiftForm.abort = ''
          this.shiftForm.time_json = [{ beginDate: '', begin: '', endDate: '', end: '', }]
        })
      }
    },
    handleClose(done) {
      done();
    },
    // 添加班次
    addShiftData() {
      this.shiftForm.time_json.push(
        {
          beginDate: '',
          begin: '',
          endDate: '',
          end: '',
        }
      )
    },
    // 删除班次
    delShiftItem(index) {
      this.shiftForm.time_json.splice(index, 1)
    },
    // 提交班次
    saveShift(name) {
      this.$refs[name].validate((valid) => {
        if (valid) {
          if (this.isEdit) {
            // 编辑
            // 班次的参数
            const timeJson = JSON.stringify(this.shiftForm.time_json)
            const params = {
              name: this.shiftForm.name,
              'time_json': timeJson,
              across_day: this.shiftForm.across_day,
              abort: this.shiftForm.abort,
              serious_late: this.elasticForm.serious_flag ? this.elasticForm.serious_late : -1,
              absenteeism_late: this.elasticForm.abs_flag ? this.elasticForm.absenteeism_late : -1
            }
            // 弹性规则的参数
            const elasticParams = {
              type: this.elasticForm.type,
              one: {},
              two: {}
            }
            if (this.elasticForm.type == 1 || this.elasticForm.type == 2) {
              if (this.elasticForm.type == 1) {
                // 弹性规则一
                elasticParams.one['max_late'] = this.elasticForm.max_late
                elasticParams.one['max_early'] = this.elasticForm.max_early
              } else if (this.elasticForm.type == 2) {
                // 弹性规则二
                elasticParams.two['next_max_late'] = this.elasticForm.next_max_late
                elasticParams.two['max_early_out'] = this.elasticForm.max_early_out
              };
              updateSchedual(this.id, params).then(res => {
                if (res.data.success) {
                  this.shiftManagerDialog = false
                  this.getSchedualList()
                  this.$message.success('班次操作成功')
                } else {
                  this.$message.error('班次操作失败')
                }
              })
              putElastic(this.elasticData.shift_id, elasticParams).then(res => {
                if (res.data.success) {
                  this.shiftManagerDialog = false
                  this.getSchedualList()
                  this.$message.success('弹性规则操作成功')
                } else {
                  this.$message.error('弹性规则操作失败')
                }
              })
            } else {
              // 没有选中弹性规则，只调用编辑班次接口
              updateSchedual(this.id, params).then(res => {
                if (res.data.success) {
                  this.shiftManagerDialog = false
                  this.getSchedualList()
                  this.$message.success('操作成功')
                } else {
                  this.$message.error('操作失败')
                }
              })
            }
          } else {
            // 新增
            const timeJson = JSON.stringify(this.shiftForm.time_json)
            const params = {
              name: this.shiftForm.name,
              'time_json': timeJson,
              across_day: this.shiftForm.across_day,
              abort: this.shiftForm.abort,
              serious_late: this.elasticForm.serious_flag ? this.elasticForm.serious_late : -1,
              absenteeism_late: this.elasticForm.abs_flag ? this.elasticForm.absenteeism_late : -1
            }
            addSchedual(params).then(res => {
              if (res.data.success) {
                this.$message.success('新增班次成功')
                if ((this.elasticForm.type == 1 || this.elasticForm.type == 2) && this.elasticVisible) {
                  // 弹性规则的参数
                  const elasticParams = {
                    type: this.elasticForm.type,
                    one: {},
                    two: {}
                  }
                  if (this.elasticForm.type == 1) {
                    // 弹性规则一
                    elasticParams.one['max_late'] = this.elasticForm.max_late
                    elasticParams.one['max_early'] = this.elasticForm.max_early
                  } else if (this.elasticForm.type == 2) {
                    // 弹性规则二
                    elasticParams.two['next_max_late'] = this.elasticForm.next_max_late
                    elasticParams.two['max_early_out'] = this.elasticForm.max_early_out
                  };
                  putElastic(res.data.data, elasticParams).then(res => {
                    if (res.data.success) {
                      this.shiftManagerDialog = false
                      this.$message.success('弹性规则操作成功')
                      this.getSchedualList()
                    } else {
                      this.$message.error('弹性规则操作失败')
                    }
                  })
                } else {
                  this.shiftManagerDialog = false
                  this.getSchedualList()
                }

              } else {
                this.$message.error('操作失败')
              }
            })
          }
        }
      })
    },
    // 查看详情
    see(item) {
      this.shiftDetailDialog = true
      this.shiftDetail.name = item.name
      this.shiftDetail.createDate = item.createDate
      this.shiftDetail.time_json = JSON.parse(item.timeJson)
      this.shiftDetail.serious_late = (item.seriousLate && item.seriousLate != -1) ? item.seriousLate : ''
      this.shiftDetail.absenteeism_late = (item.absenteeismLate && item.absenteeismLate != -1) ? item.absenteeismLate : ''

      getElastic(item.id).then(res => {
        if (res.data.success) {
          const resData = res.data.data
          this.shiftDetail.type = resData.type
          console.log(resData);

          if (resData.one) {
            this.shiftDetail.one.max_late = resData.one.max_late
            this.shiftDetail.one.max_early = resData.one.max_early
          } else if (resData.two) {
            this.shiftDetail.two.next_max_late = resData.two.next_max_late
            this.shiftDetail.two.max_early_out = resData.two.max_early_out
          }
        }
      })
    }
  },
};
</script>
<style scoped>
.flex {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;

}

.flexx {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  flex-wrap: wrap;
}

.keyword {
  width: 200px;
  height: 32px;
}

.el_button {
  margin-left: 24px;
  margin-top: 5px;
}

.reset_btn {
  margin-right: 24px;
}

::v-deep .el-input__inner {
  height: 32px;
}

/* 根据屏幕做适配 */
@media screen and (min-width:1450px) and (max-width: 1950px) {
  .table_info {
    height: 700px;
    margin-top: 8px;
    background: #fff;
    overflow: scroll;
  }
}

@media screen and (min-width:1200px) and (max-width: 1450px) {
  .table_info {
    height: 550px;
    margin-top: 8px;
    background: #fff;
    overflow: scroll;
  }
}

.new_add {
  height: 50px;
  margin: 0 24px;
}


.attendance_add {
  width: 100%;
  height: 50px;
  text-align: right;
}

.el_button_add {
  width: 90px;
  margin-top: 11px;
  margin-right: 12px;
}

.attendance_details {
  width: 200px;
  height: 32px;
  font-size: 14px;
  font-family: PingFang-SC-Bold, PingFang-SC;
  font-weight: bold;
  color: #333333;
  line-height: 32px;
}

.tan {
  margin-top: 20px;
}

.tan .tan-title {
  font-size: 16px;
  margin-bottom: 15px;
}

.table {
  height: 720px;
  background: #fff;
  margin: 0 24px;
}

.table_head {
  height: 50px;
  background: rgb(244, 244, 244);
}

.background_f5 {
  background: rgb(244, 244, 244);
}

.table_body {
  height: 40px;
}

.table_head_items {
  width: 25%;
  height: 100%;
  line-height: 50px;
  text-align: center;
  border: 1px solid #eee;
  color: rgba(16, 16, 16, 100);
  font-size: 16px;
  text-align: center;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: bold;
  color: #333333;
}

.table_body_items {
  width: 25%;
  height: 100%;
  line-height: 40px;
  text-align: center;
  border: 1px solid #eee;
  color: rgba(16, 16, 16, 100);
  font-size: 16px;
  font-family: SourceHanSansSC-regular;
}

.el_link {
  color: rgba(67, 139, 247, 100);
  font-size: 16px;
  text-align: left;
  font-family: SourceHanSansSC-regular;
}

.marginleft24 {
  margin-left: 24px;
}


::v-deep .el-dialog__footer {
  border-top: 1px solid #eee;
  text-align: center !important;
}

.add_shift_manager {
  width: 100%;
  height: 35px;
  text-align: right;
  border-top: 1px solid #eee;
  margin-top: 12px;
}

.shift_number {
  margin-top: 12px;
}

.elastic_punch {
  width: 100%;
  border: 1px solid #eee;
}

.el_pagination {
  display: flex;
  justify-content: flex-end;
  width: 100%;
  padding: 15px 0;
  text-align: center;
  background: #fff;
}

.detail_title {
  font-size: 18px;
  font-weight: 400;
  text-align: left;
  color: #333;
}

.detail_create_time {
  height: 24px;
  font-size: 16px;
  font-weight: 400;
  text-align: right;
  color: #999;
  margin-left: 24px;
}

.details_table {
  margin-top: 12px;
  text-align: center;
  margin: 0 auto;
  /* overflow: scroll; */

}

.details_table_items {
  width: 150px;
  height: 80px;
  margin-top: 6px;
}

.details_table_items_top,
.details_table_items_bottom {
  width: 150px;
  height: 40px;
  border: 1px solid #999;
  font-size: 16px;
  line-height: 40px;
  text-align: center;
}

.marginttop24 {
  margin-top: 16px;
}

.asterisk {
  color: #ed9b9d;
  position: relative;
  top: 2px;
}

.visibility {
  visibility: hidden;
}

::v-deep .el-dialog__title {
  font-size: 18px !important;
}

.colorred {
  color: red;
}

.colorgray {
  color: #C4C4C4;
}

.attendance_days_input {
  width: 100px;
}

.search1 {
  width: 100%;
  height: 50px;
  background: #fff;
  display: flex;
  flex-direction: row;
}

.search_item1 {
  width: 250px;
  height: 36px;
  margin-right: 24px;
  margin-left: 24px;
}

.search_item {
  width: 80px;
  height: 36px;
  margin-right: 24px;
  text-align: right;
}

.margin29 {
  margin-right: 29px;
}

.margin19 {
  margin-right: 19px;
}

.anniubtn {
  width: 80px;
  margin-top: 4.5px;
}

.delete_el_link {
  margin-left: 300px;
}

.el_inputsss {
  width: 100px;
}


/* 班次弹窗 */
.shift-dialog>>>.el-dialog__body {
  height: 500px;
  overflow-x: hidden;
  overflow-y: scroll;
}

.shift-form .tip-icon {
  font-size: 20px;
  text-align: center;
  margin-top: 6px
}

.shift-form .zhi {
  margin-top: 6px;
  text-align: center;
}

.shift-form .del-icon {
  margin-bottom: 0;
  height: 32px;
  text-align: center;
  margin-top: 6px;
  margin-left: 6px;
}

.elastic-container .elastic-tan {
  display: flex;
  border-top: 1px solid #ccc;
  margin-top: 10px;
  padding-top: 5px;
}

.elastic-container .elastic-tan .elastic-left {
  margin: 0 15px;
}

.elastic-container .elastic-tan .elastic-right {
  flex: 1
}

.elastic-container .elastic-tan>>>.inline-item .el-form-item__content {
  display: flex;
  align-items: center
}

.elastic-container .elastic-tan>>>.inline-item .el-input {
  width: 120px;
  margin-right: 5px
}

.elastic-container .elastic-tan>>>.inline-item .el-input__inner {
  height: 28px;
}

/* end */
/* 更多设置 */
.more {
  display: flex;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid #ccc;
}

.more .title {
  font-weight: normal;
  margin: 0 15px;
}

.more .late-box {
  display: flex;
  align-items: center;
  margin-bottom: 10px
}

.more .late-box>>>.el-input {
  width: 120px;
  margin-right: 5px
}

.more .late-box .desc {
  margin: 0 5px;
}

.search-left1{
  width: 60%;
  height: 50px;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
}

.search-right1{
  width: 40%;
  height: 50px;
  display: flex;
  flex-direction: row;
}

</style>
